<template>
	<view>
		<!-- 导航栏 -->
		<view class="rank_nav">
			<image src="../../../static/backjiantou.png" @click="backrank"></image>
			<text class="rank_nav_text">排行榜</text>
		</view>
		
		<!-- 选项卡 -->
		<view class="topTabs">
			<scroll-view  class="uni-swiper-tab">
				<view class="swiper-tab-list" v-for="(item,index) in items" :key="index" :class="{'active':tabIndex==index}" @tap="change(index)">
		        {{item.name}}
				<view class="swiper-tab-line">
					
				</view>
				</view>
		  
			</scroll-view>
			</view>
			
			
			<!-- 官方榜 -->
			<view class="rank_main" :class="{dis:btnnum == 0}">
				<view class="rank_title">
					<image src="../../../static/logo.png" mode=""></image>
					<text>官方榜</text>
				</view>
				<view class="rank_box1" v-for="(item,index) in guanfang.slice(0,4)" :class="rank[index]" @click="godetails(item.id)">
					
					<text class="rank_box1_text1">{{item.updateFrequency}}</text>
					<text class="rank_box1_text2">{{item.name}}</text>
					<image  :src="item.coverImgUrl" mode=""></image>
				</view>
				<view class="rank_box2">
					
					<view class="rank_box3" v-for="(items,index) in guanfangdetail.slice(0,4)" :class="box[index]" >
				    <view class="rank_box4">
					<text class="rank_box_text">
				    	 1.
				    </text>
					
						<text class="rank_box_text1" v-for="(items1,index) in items.tracks.slice(0,1)">{{items1.first}}</text>
				       
						<text class="rank_box_text2" v-for="(items1,index) in items.tracks.slice(0,1)">-{{items1.second}}</text>
					</view>
					<view class="rank_box4">
						<text class="rank_box_text">
							 2.
						</text>
						
							<text class="rank_box_text1" v-for="(items1,index) in items.tracks.slice(1,2)">{{items1.first}}</text>
						    <text class="rank_box_text2" v-for="(items1,index) in items.tracks.slice(1,2)">-{{items1.second}}</text>
					</view>
					<view class="rank_box4">
						<text class="rank_box_text">
							 3.
						</text>
						
							<text class="rank_box_text1" v-for="(items1,index) in items.tracks.slice(2,3)">{{items1.first}}</text>
						    <text class="rank_box_text2" v-for="(items1,index) in items.tracks.slice(2,3)">-{{items1.second}}</text>
					</view>
					</view>
				</view>		
			</view>
			
			<!-- 精选榜 -->
			<view class="rank_main_jinxuan" :class="{dis:btnnum == 1}">
				<view class="rank_title">
					<image src="../../../static/logo.png" mode=""></image>
					<text>全球榜</text>
				</view>
				<view class="rank_box1_jinxuan" v-for="(item,index) in guanfang.slice(4,29)" @click="godetails(item.id)">
					
					<text class="rank_box1_text1_jinxuan">{{item.updateFrequency}}</text>
					<text class="rank_box1_text2_jinxuan">{{item.name}}</text>
					<image  :src="item.coverImgUrl" mode=""></image>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				guanfang:[],
				guanfangdetail:[],
				sHeight:500,
				btnnum: 0,
				tabIndex:'',
				rank:[
					"rank1",
					"rank2",
					"rank3",
					"rank4",
					
				],
				box:[
					"box1",
					"box2",
					"box3",
					"box4",
					
				],
				items: [
					{
						id:1,
						name: '官方'
					},
					{
						id:2,
						name: '全球'
					}
					
					
				],
			}
		},
		onShow() {
			this.getrank()
			this.getrankdetail()
		},
		methods: {
			change(e) {
			    this.btnnum = e
			    this.tabIndex = e
			},
			getrank(){
				uni.request({
					url:'http://localhost:3000/toplist',
					method:'GET',
					success: (res) => {
						this.guanfang = res.data.list
						console.log(res.data.list)
					}
				})
			},
			getrankdetail(){
				uni.request({
					url:'http://localhost:3000/toplist/detail',
					method:'GET',
					success: (res) => {
						this.guanfangdetail = res.data.list
						
					}
				})
			},
			backrank(){
				uni.navigateBack({
					delta:1
				})
			},
			godetails(id){
				uni.navigateTo({
					url:'../sldetails/sldetails'
				})
				uni.setStorageSync('setData',id);
				console.log(id)
			}
		}
	}
</script>

<style lang="scss">
	// 页面背景
	page{
		background: #f4f4f4;
	}
	// 每个盒子的背景
	.rank1{
		background:#f3e0e6;
		.rank_box1_text2{
			color:#e82e77;
		}
		
	}
	.rank2{
		background:#e0eae9;
		.rank_box1_text2{
			color:#259889;
		}
	}
	.rank3{
		background:#f3e1e0;
		.rank_box1_text2{
			color:#d72525;
		}
	}
	.rank4{
		background:#e3e7f0;
		.rank_box1_text2{
			color:#386fc1;
		}
	}
	
.rank_nav{
		width:750rpx;
		height:80rpx;
		margin-top:30rpx;
		image{
			width:50rpx;
			height: 50rpx;
			position: absolute;
			top:20rpx;
			left:50rpx;
		}
		text{
			width: 200rpx;
			height: 50rpx;
			position: absolute;
			top:24rpx;
			left:120rpx;
			font-weight: 600;
			font-size: 32rpx;
		}
	}
	
	// 选项卡
	.rank_main{
		display: none;
	}
	.rank_main_jinxuan{
		display: none;
	}
	.dis{
		display: block;
	}
	.topTabs{
		width:700rpx;
		height:100rpx;
		margin-top:20rpx;
		margin-left:20rpx;
		border-radius: 10rpx;
		
	}
	.swiper-tab-list{
		width:350rpx;
		height:60rpx;
		color:#696969;
		font-weight: bold;
		float: left;
		
		margin-top:10rpx;
		text-align: center;
	}
	.uni-swiper-tab .active{
		
		width:350rpx;
		height: 60rpx;
		color:#313131;
		font-family: bold;
	}
	.active .swiper-tab-line{
		width:80rpx;
		margin:auto;
		background-color: #fe3c3c;
		border: 6rpx solid #fe3c3c;
		border-radius: 60rpx;
		margin-top:-10rpx;
		
	}
	// 选项卡内容
	// 官方榜
	.rank_main{
		width:700rpx;
		height: 1200rpx;
		margin-left:20rpx;
		margin-top:-20rpx;
	}
	.rank_title{
		width:200rpx;
		height:80rpx;
		position: relative;
		image{
			width:40rpx;
			height: 40rpx;
			position:absolute;
			top:24rpx;
			left:20rpx;
		}
		text{
			font-size: 38rpx;
			font-weight: 600;
			position: absolute;
			top:18rpx;
			left:80rpx;
		}
	}
	.rank_box1{
		width: 660rpx;
		height:250rpx;
		margin-top:20rpx;
		margin-left:20rpx;
		border-radius: 20rpx;
		position: relative;
		z-index:2;
		.rank_box1_text1{
			width:130rpx;
			height: 50rpx;
			position: absolute;
			top:10rpx;
			right:0rpx;
			font-size: 5px;
			transform: scale(0.7);
			font-weight: 600;
			color: #737373;
			opacity: 0.5;
		}
		.rank_box1_text2{
			font-size: 40rpx;
			font-weight: 600;
			position: absolute;
			top:10rpx;
			left:50rpx;
		}
		image{
			width:150rpx;
			height:150rpx;
			position: absolute;
			top:70rpx;
			left:35rpx;
			border-radius: 10px;
		}
		
	}
	.rank_box3{
		
		width:400rpx;
		height:150rpx;
		margin-top:150rpx;
	}
	.rank_box4{
		display: flex;
		
	}
	.rank_box_text{
		width:40rpx;
		height:40rpx;
		font-weight: 600;
	}
	.rank_box_text1{
		height:40rpx;
		font-weight: 600;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display:-webkit-box ;
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	.rank_box_text2{
		color: #888b90;
		width:200rpx;
		height:35rpx;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
		
	}
	.rank_box2{
		position:absolute;
		top:200rpx;
		left:280rpx;
		z-index: 100;
		
	}
	.box1{
		
		position: absolute;
		top:10rpx;
		left:0;
	}
	.box2{
	
		position: absolute;
		top:280rpx;
		left:0;
	}
	.box3{
		
		position: absolute;
		top:550rpx;
		left:0;
	}
	.box4{
		
		position: absolute;
		top:820rpx;
		left:0;
	}
	.rank_box_text_1{
		
		display: inline-block;
		border: 1px solid red;
	}
	
	// 精选榜
	.rank_main_jinxuan{
		width:700rpx;
		height: 1200rpx;
		margin-left:20rpx;
		margin-top:-20rpx;
	}
	.rank_title_jinxuan{
		width:200rpx;
		height:80rpx;
		position: relative;
			text{
				font-size: 38rpx;
				font-weight: 600;
				position: absolute;
				top:18rpx;
				left:40rpx;
			}
	}
	.rank_box1_jinxuan{
		width: 200rpx;
		height:260rpx;
		margin-top:20rpx;
		margin-left:30rpx;
		margin-bottom: 60rpx;
		border-radius: 20rpx;
		position: relative;
		z-index:2;
		float: left;
		.rank_box1_text1_jinxuan{
			width:130rpx;
			height: 50rpx;
			position: absolute;
			top:10rpx;
			right:0rpx;
			font-size: 5px;
			transform: scale(0.9);
			color: #ffffff;
			z-index: 100;
		}
		.rank_box1_text2_jinxuan{
			font-size: 20rpx;
			font-weight: 600;
			z-index: 200;
			position: absolute;
			top:205rpx;
		}
		image{
			width:200rpx;
			height:200rpx;
			position: absolute;
			top:0rpx;
			left:0rpx;
			border-radius: 10px;
		}
		
	}
</style>
